<template>
  <div class="app-container">

    <!-- 搜索区 -->
    <el-form  v-admin :model="queryParam" ref="queryForm" size="small" :inline="true">

      <el-form-item  label="商家名称" prop="name">
        <el-input v-model="queryParam.name" placeholder="请输入商家名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="审核状态" prop="status">
        <el-select v-model="queryParam.status" placeholder="请选择" clearable>
          <el-option v-for="item in dicts.sys_audit_status" :key="item.id" :label="item.dictLabel" :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>


    <!--功能区-->
    <el-row :gutter="10" class="mb8">


      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExcel()">导出</el-button>
      </el-col>
    </el-row>


    <el-table :data="tableData.rows" border style="width: 100%" >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row style="padding: 10px;">
            <el-col :span="24">
             商家地址： {{scope.row.address}}
            </el-col>

            <el-col :span="24">
              <BaiduDisplay :itemData="scope.row"></BaiduDisplay>
            </el-col>

          </el-row>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="商家名称" />
      <el-table-column prop="loginName" label="登录账号" />
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column label="商家图片" width="220">
        <template slot-scope="scope">
          <img :src="scope.row.picture" width="150">
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态">
        <template slot-scope="scope">
          <DictTag v-if="dicts.sys_audit_status" :dataArray="dicts.sys_audit_status" :value="scope.row.status"></DictTag>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" v-shop type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" v-admin v-if="scope.row.status==='0'" type="text" icon="el-icon-receiving" @click="handleProcess(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页条 -->
    <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
      :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />


    <!-- 新增和修改对话框-->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false"
      :before-close="cancelForm">
      <el-form ref="form" :model="form" label-width="100px">


        <el-form-item label="商家名称" prop="name" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
           {{form.name}}

           <div v-html="form.name"></div>
        </el-form-item>

        <el-form-item label="联系电话" prop="phone" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
          <el-input v-model="form.phone" placeholder="请输入联系电话" />
        </el-form-item>

        <el-form-item label="地图位置" prop="longitude" style="text-align:left;">
          <span>经度:{{form.longitude}} 纬度:{{form.latitude}}</span>
          <el-button type="primary" @click="mapShow=true">选择位置</el-button>

          <div style="display:none;">
             <el-input   v-model="form.longitude"  />
           </div>
        </el-form-item>

        <el-form-item label="商家地址" prop="address" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
          <el-input v-model="form.address" placeholder="请输入商家地址" />
        </el-form-item>




        <el-form-item label="商家图片" prop="picture" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
          <el-upload class="avatar-uploader" :action="imageUploadUrl" :headers="headers" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="form.picture" :src="form.picture" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 地图选择器-->
    <el-dialog title="位置选择器" :visible.sync="mapShow" width="800px" append-to-body  :close-on-click-modal="false">
      <BaiduAddress    :itemData="form" v-on:myclick="handlerLocation"></BaiduAddress>
    </el-dialog>

    <!-- 审核 -->
    <RecuritEdit ref="recuritdom" v-on:myrefresh="fetchData"  :row="editRow"></RecuritEdit>

  </div>
</template>

<script>
  import PageMixin from '@/mixins/PageMixin.js'
  import AddOrEditMixin from '@/mixins/AddOrEditMixin.js'
  import DictMixin from '@/mixins/DictMixin.js'
  import { dataApi, addApi, editApi, findByIdApi,downloadExcel } from '@/api/enterprise.js'
  import BaiduDisplay from '@/components/BaiduAddress/display.vue'
  import BaiduAddress from '@/components/BaiduAddress/index.vue'
  import RecuritEdit from '@/components/Recruit/index.vue'
  export default {
    components: {
      BaiduDisplay,
      BaiduAddress,
      RecuritEdit
    },
    mixins: [DictMixin, PageMixin, AddOrEditMixin],
    dicts: ['sys_audit_status'],
    data() {
      return {
        // 查询函数
        fetchDataApi: dataApi,
        // 新增函数
        addApi: addApi,
        // 新增函数
        editApi: editApi,
        // 新增函数
        findByIdApi: findByIdApi,
        primaryKey: 'id',
        //头像放到表单哪个字段里面
        uploadField: 'picture',
        // 百度地图
         mapShow: false,
         editRow: undefined
      }
    },
    methods: {
      // 重置表单
      initFormValue() {
        // 头像必须要有定义
        this.form = {
          picture: undefined
        }
      },
      handleExcel() {
        this.download('/api/merchandiser/download', this.queryParam, 'merchandiser_data.xlsx')
      },
      // 地图位置注册事件
      handlerLocation(resp){
        this.form.address= resp.address
        this.form.longitude=resp.longitude
        this.form.latitude=resp.latitude
        this.mapShow=false
      },
      // 管理员审核
      handleProcess(row) {
        this.editRow = row
      }

    },
    created() {
      this.initFormValue()
    }

  }
</script>

<style>
</style>
